<template>
  <el-card>
    <div slot="header" class="header">
      <span>线上热门搜索</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          <i class="el-icon-more" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

    </div>
    <div>
      <el-row :gutter="10">
        <el-col :span="12"><LineChart title="搜索用户数" count="12321" /></el-col>
        <el-col :span="12"><LineChart title="人均搜索次数" count="100" /></el-col>
        <el-table
          style="width: 100%;margin-top:5px"
          :default-sort="{prop: 'date', order: 'descending'}"
          :data="tableData"
          border
        >
          <el-table-column
            prop="date"
            label="排名"
            sortable
            width="80"
          />
          <el-table-column
            prop="name"
            label="搜索关键字"
            width="180"
          />
          <el-table-column
            prop="address"
            sortable
            label="用户数"
          />
          <el-table-column
            prop="address"
            sortable
            label="周涨幅"
          />
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :total="50"
        />
      </el-row>
    </div>
  </el-card>
</template>

<script>
import LineChart from './LineChart'
export default {
  name: 'Search',
  components: {
    LineChart
  },
  data() {
    return {
      tableData: [{
      }]
    }
  }
}
</script>

<style>
.header{
    display: flex;
    justify-content: space-between;
}
.el-pagination{
    float: right;
}
</style>

